<template>
  <Navbar title="我的团队" />
  <div class="team">
    <div class="panel">
      <ul class="info">
        <li v-for="item in list" :key="item.title">
          <div class="txt"> {{ item.title }} </div>
          <div class="number"> {{ item.value }} </div>
        </li>
      </ul>
    </div>
    <div class="g-title"> 直推名单 </div>
    <div class="list">
      <div class="van-pull-refresh">
        <div class="van-pull-refresh__track" style="transition-duration: 0ms;">
          <div class="van-pull-refresh__head"></div>
          <div role="feed" class="van-list">
            <div class="van-list__placeholder"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import Navbar from '../../components/Navbar/index.vue'

const list = reactive([
  {
    title: '我的认购',
    value: 0
  },
  {
    title: '累计收益',
    value: 0
  },
  {
    title: '团队业绩',
    value: 0
  },
  {
    title: '直推人数',
    value: 0
  },
  {
    title: '有效直推',
    value: 0
  },
  {
    title: '团队人数',
    value: 0
  },
])
</script>

<style scoped lang='scss'>
.team {
  padding-top: 2.875rem;
  .panel {
    margin: 0 0.9375rem 0.9375rem 0.9375rem;
    padding-top: 1rem;
    .info {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: stretch;
      li {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 6.4062rem;
        border-radius: 0.4375rem;
        height: 4.375rem;
        background: linear-gradient(rgba(71, 71, 107, 0.8) 0%, rgba(50, 55, 75, 0.8) 33.81%, rgba(71, 71, 107, 0.8) 71.33%);
        border: 1px solid rgb(68, 78, 104);
        margin-bottom: 0.625rem;
        text-align: center;
        flex-direction: column;
      }
      .txt {
        align-items: center;
        color: rgb(211, 222, 252);
        font-size: 0.875rem;
      }
      .number {
        font-size: 1.125rem;
        margin-top: 0.3125rem;
        color: #fff;
      }
    }
  }
  .g-title {
    margin-left: 1.125rem;
    font-size: 1.0625rem;
  }
  .list {
    border-radius: 0.3125rem;
    overflow: hidden;
    .van-pull-refresh {
      overflow: hidden;
      user-select: none;
    }
    .van-pull-refresh__track {
      position: relative;
      height: 100%;
      transition-property: transform;
      .van-pull-refresh__head {
        position: absolute;
        left: 0;
        width: 100%;
        height: 3.125rem;
        overflow: hidden;
        color: #969799;
        font-size: 0.875rem;
        line-height: 3.125rem;
        text-align: center;
        transform: translateY(-100%);
      }
      .van-list__placeholder {
        height: 0;
        pointer-events: none;
      }
    }
  }
}
</style>